<script setup lang="ts">
import Copy from "@/components/copy/index.vue";
import img from "@/assets/list_fall.png";
import JHead from "@/components/j-head/index.vue";
import Lines from "@/components/lines/index.vue";
import { onMounted, ref, watch } from "vue";
import { Bus, CONN_STABLE_CURRENCY, KLINE_RESET } from "@/connetion/Bus";
import { formatBigNumber, formatTimeAgo } from "@/comm/format";
import { useKline } from "@/stores/kline";
import { useActivity } from "@/stores/activity";
import DomDrag from "@/comm/DomDrag";
import { off } from "process";

const kline = useKline();
const activity = useActivity();
const props = defineProps({
    style: Object,
    visible: Boolean
});
const emit = defineEmits(["hide"]);

const list = ref<any[]>([]);
const max = 20;
const table = ref();
onMounted(() => {
    DomDrag.setDrag(table.value);
    // console.log("jsz", "添加事件");
    Bus.on(CONN_STABLE_CURRENCY, val => {
        // console.log("link", val)
        list.value?.unshift(val);
        if (list.value.length > max) {
            list.value.pop();
        }
        // console.log('链上活动数据$$$$$$$$$$$$$$$', list.value)
    });

    Bus.on(KLINE_RESET, () => {
        // console.log("##jsz", "init act");
        list.value = activity.chainActivitys.slice(0, 20);
        // console.log('链上活动数据$$$$$$$$$$$$$$$', list.value)
    });
    // Bus.emit(KLINE_RESET)
});

watch(
    () => activity.chainActivitys.length,
    (newVal, oldVal) => {
        if (newVal == 0) {
            // console.log("----------变化 0");
            list.value = [];
            return;
        }
        if (newVal > 0 && oldVal == 0) {
            // console.log("----------变化 1");
            list.value = activity.chainActivitys.slice(0, 20);
            // console.log('链上活动数据$$$$$$$$$$$$$$$', list.value)
        }
    }
);

const onHideLink = () => {
    // console.log("hide");
    kline.changeLinkVisible(false);
};

const getColor = (type: string) => {
    let str = type ? type.toLowerCase() : "";
    if (str == "sell" || str == "withdraw") {
        return `var(--win)`;
    }
    if (str == "buy" || str == "deposit") {
        return `var(--lose)`;
    }
    return "var(--lose)";
};
function toWeb(e: any, item: any) {
    // console.log('触发点击跳转', item)
    const personURL = "/address/";
    const browserURL = "/entity/";
    const findKey = (targetValue: any) => {
        let key = ''
        for (let i in item) {
            if (item[i] == targetValue) {
                key = i
            }
        }
        return key
    }
    const key = findKey(e)
    if (item.fromAddressType == 'eoa' && item.fromTag) {
        return
    }
    if (item.toAddressType == 'eoa' && item.toTag) {
        return
    }
    if (key == 'toAddress') {
        if (item.toAddressType == 'eoa') {
            window.open(`${personURL}${item.toAddress}`)
        } else {
            if (item.toAddressType == 'fund' || item.toAddressType == 'cex') {
                window.open(`${browserURL}${item.toEntityId}`)
            }
        }
    }
    if (key == 'address') {
        if (item.fromAddressType == 'eoa') {
            window.open(`${personURL}${item.address}`)
        }
        if (item.toAddressType == 'eoa') {
            window.open(`${personURL}${item.address}`)
        } else {
            if (item.toAddressType == 'fund' || item.toAddressType == 'cex') {
                window.open(`${browserURL}${item.toEntityId}`)
            }
        }
    }

}
const onLog = (item: any) => {
    console.log(item);
};
</script>
<template>
    <div ref="table" class="table c-title-5 flex-column" :class="{ visible: kline.linkVisible }">
        <!-- <JHead @onClose="onHideLink" text="链上活动"> -->
        <div style="padding: 0 7px 5px 7px">
            <JHead @onClose="onHideLink" :text="$t('message.tableLink.a')" moveStyle>
                <template #icon>
                    <Lines />
                </template>
            </JHead>
        </div>
        <div class="row-c row-line" style="color: var(--color); padding: 4px 0 4px 0">
            <div cols="2" class="cf1 c-left pl-10p"><span>Action</span></div>
            <div cols="3" class="cf3 c-left"><span>Address</span></div>
            <div cols="2" class="cf2 c-right"><span>Amount</span></div>
            <div cols="3" class="cf3 c-left"><span>Value</span></div>
            <div cols="2" class="cf2 c-right pr-10p"><span>Time</span></div>
        </div>
        <div class="row-box">
            <div v-for="(item, idx) in list" :key="idx" class="row-c context-c row-line" @click="onLog(item)">
                <div cols="2" class="cf1 c-left pl-10p">
                    <span :title="item.action" :style="{ color: getColor(item.action) }">{{ item.action || item.type
                    }}</span>
                </div>
                <div cols="3" class="cf3 c-left" v-if="item.action == 'withdraw'">
                    <Copy :isP="false" :text="item.toAddress || item.toTag" :num="3" @change="(e) => toWeb(e, item)">
                    </Copy>
                </div>
                <div cols="3" class="cf3 c-left" v-if="item.action == 'transfer'">
                    <Copy :isP="false" :text="item.toAddress || item.address || item.toTag" :num="3" @change="(e) => toWeb(e, item)">
                    </Copy>
                </div>
                <div cols="3" class="cf3 c-left" v-if="item.action == 'deposit'">
                    <Copy :isP="false" :text="item.address || item.fromTag" :num="3" @change="(e) => toWeb(e, item)">
                    </Copy>
                </div>
                <div cols="3" class="cf3 c-left" v-if="item.type == 'swap'">
                    <Copy :isP="false" :text="item.fromaddress || item.fromTag || item.address || item.toTag || item.toAddress" :num="3" @change="(e) => toWeb(e, item)">
                    </Copy>
                </div>
                <div cols="2" class="cf2 c-right" v-if="item.action == 'withdraw'">
                    <span :title="Math.abs(item.outAmount)+''">{{ formatBigNumber(Math.abs(item.outAmount)) }}</span>
                </div>
                <div cols="2" class="cf2 c-right" v-else>
                    <span :title="Math.abs(item.outAmount)+''">{{ formatBigNumber(Math.abs(item.outAmount)) }}</span>
                </div>
                <div cols="3" class="cf3 c-left">
                    <span :title="Math.abs(item.outusdt)+''">${{ formatBigNumber(Math.abs(item.outusdt)) }}</span>
                </div>
                <div cols="2" class="cf2 c-right" style="padding-right: 7px">
                    <span :title="formatTimeAgo(item.timestamp)">{{ formatTimeAgo(item.timestamp) }}</span>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.pl-10p {
    padding-left: 10px;
}

.pr-10p {
    padding-right: 10px;
}

.row-line {
    position: relative;
    padding: 4px 0;

    &::after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        background-color: #444;
    }
}

.table {
    width: 360px;
    // height: 187px;
    border-radius: 4px;
    background-color: rgba(54, 59, 67, 0.7);
    // padding: 10px;
    padding: 10px 0 10px 0;
    padding-top: 10px;
    z-index: 3;
    position: fixed;
    top: 180px;
    right: 420px;
    box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.5);
    // position: fixed;
    // left: 20%;
    pointer-events: none;
    visibility: hidden;

    &.visible {
        pointer-events: all;
        visibility: visible;
    }

    img {
        width: 16px;
        height: 16px;
    }

    .header {
        display: flex;
    }

    .v-col {
        padding-block: 0;
    }
}

.close-btn {
    width: 12px;
    height: 12px;
    object-fit: contain;
    margin-right: 8px;
}

.c-left {
    text-align: left !important;
}

.c-right {
    text-align: right !important;
}

.c-center {
    text-align: center !important;
}

.c-left,
.c-right,
.c-center {
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: ellipsis;
}

.row-box {
    height: 120px;
    overflow-y: auto;
}

.context-c {
    // padding: 4px 0;
    padding: 4px 0 4px 0;
    // border-top: 1px solid #343942;
}

.row-line {
    position: relative;

    &::after {
        position: absolute;
        content: "";
        top: 0;
        width: 100%;
        height: 1px;
        background-color: #474747;
    }
}

.row-c {
    display: flex;

    // &::before {
    //     position: absolute;
    //     content: "";
    //     top: 0;
    //     width: 100%;
    //     height: 1px;
    //     background-color: #343942;
    // }
    .cf1 {
        flex: 2.5 0 0;
        margin-right: 10px;

        &:last-child {
            margin-right: 0;
        }
    }

    .cf2 {
        flex: 2 0 0;
        overflow: hidden;
        margin-right: 10px;

        &:last-child {
            margin-right: 0;
        }
    }

    .cf3 {
        flex: 2.8 0 0;
        overflow: hidden;
        margin-right: 10px;
    }
}
</style>
